<script lang="ts" setup>
import { ref, h, reactive, toRefs } from 'vue'
import { ElDivider } from 'element-plus'
import api from '@/api/dynamic'
import { dataStore } from '@/stores/data'
import { toRaw } from '@vue/reactivity'
import { useRouter, useRoute } from 'vue-router'
import { cacheStore } from '@/stores/cache'
// import { toRaw } from '@vue/reactivity'
// const { SeeData } = cacheStore()
const { activities } = dataStore()
const router = useRouter()
const spacer = h(ElDivider, { direction: 'vertical' })
api.archives({}).then((res: any) => {
	activities.push(res.data.data)
}).catch(err => {
	console.log(err)
})

</script>
<template>

	<div class="activities">
		<el-card class="box-card">
			<div class="card" v-for="(item, index) in activities[0]">
				<h1>{{ index }} 
					<span v-if=" item.length<10"> [0{{ item.length }}]</span>
					<span v-else> [{{ item.length }}]</span>
				</h1>
				<div class="content" v-for="cont in item" @click="router.push({path: `/dynamic/${cont.a_id}`})  "> 
					
					<li>{{ cont.a_title }} </li><li class="date">{{ cont.a_date }}</li>
				</div>
			</div>
		</el-card>

	</div>
</template>

<style lang="scss" scoped>
.card{
	margin: 10px  auto;
	padding-left: 3%;
	position: relative;
}
.date{
	list-style: none;
}
.content{
	display: flex;
	justify-content: space-between;
	margin: 10px auto;
	cursor: pointer;
	margin-left: 5%;
	.date{
		color:var(--el-text-color-secondary);
	}
	
}
@media only screen and (max-width: 800px) {
	.content{
	display: block;
	margin-left: 10%;
	.date{
		margin-left: 20px;
	}
}
	
}
</style>

